<template>
    <div id="app">
    <div>
        <span>姓名:</span>
        <input type="text" v-model='uname'/>
      </div>
      <div>
        <span>年龄:</span>
        <input type="number" v-model='age' />
      </div>
      <div>
        <span>性别:</span>
        <select v-model='sex'>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click='add'>添加/修改</button>
      </div>
      <div>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tr v-for='(item,index) in list' :key='item.id'>
            <td>{{index +1 }}</td>
            <td>{{item.uname}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
              <button @click='del(item.id)'>删除</button>
              <button @click='edit(item.id)'>编辑</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
 
</template>

<script>
export default {
   data(){
      return{
          list: [
         { id: 1, uname: "小红", age:18, sex: "女" },
         { id: 2, uname: "小绿", age: 30, sex: "男" },
         { id: 3, uname: "小粉", age: 20, sex: "男" }
      ],
      uname:'',
      age:'',
      sex:'男',
      id: null
      }
   },
   methods:{
      // 修改 和 添加
      add(){
         if( this.id === null){
            if(this.uname === '' || this.age ==='' ){
              return  alert('内容不能为空！')
            }
          this.list.push({
            id: +new Date (),
            uname: this.uname,
            age:  this.age,
            sex: this.sex
          })
         } else{
           let index =this.list.findIndex(item=> item.id === this.id) 
           this.list.splice(index,1,{ id: +new Date (),
            uname: this.uname,
            age:  this.age,
            sex: this.sex})
           this.id = null;
         }
         this.uname = '',
          this.age = '',
          this.sex = '男'
      },
      edit(id){
      let  arr = this.list.find(item=>item.id === id)
      console.log(arr);
      this.uname = arr.uname,
      this.age = arr.age,
      this.sex = arr.sex
      this.id = arr.id
      },
      del(id){
        this.list = this.list.filter(item=>item.id !== id)
      }
   }
   }
</script>

<style>

</style>